<template>
	<view class="payContainer">
		<!-- 添加收货地址 -->
		<view class="addAddress">+添加收货地址</view>
		<!-- 支付配送方式 -->
		<view class="paymentAndDistribution">
			<view class="payment">
				<text>支付方式</text>
				<i>
					在线支付
					<span>></span>
				</i>
			</view>
			<view class="distribution">
				<text>配送方式</text>
				<i>
					普通快递 (+0元)
					<span>></span>
				</i>
			</view>
		</view>
		<!-- 用药人信息 -->
		<view class="personMessage">
			<view class="top">
				<view class="container">
					<view class="image"><image src="../../static/images/tabBar/tab-headerline.png"></image></view>
					<text>请填写用药人信息</text>
				</view>
			</view>
			<view class="bottom">
				<image v-if="show" src="../../static/images/正确1.png" mode=""></image>
				<image v-else src="../../static/images/正确2.png" mode=""></image>
				<text>我已知晓,在药品使用前需确保阅读用药说明和用药禁忌,并遵医嘱使用..</text>
			</view>
		</view>
		<!-- 商品页 -->
		<view class="pay_hospital">
			<view class="pay_hospital_title">
				<view>健客大药房网订店送</view>
				<text>您的订单由健康大药房委托第三方快递为您配送</text>
			</view>
			<!-- 具体商品 -->
			<view class="pay_image" v-for="(item,index) in cartList" :key="index" v-if="item.selected">
				<image :src="item.primaryPicUrl?item.primaryPicUrl:'../../static/images/2.jpg'" mode=""></image>
				<view class="pay_image_text">
					<view>{{item.name}}</view>
					<view>规格:17 * 0.1s</view>
					<view class="pay_image_price">
						<view>
							<text>价格:{{item.retailPrice}}</text>
							<text style="margin-left: 10upx;">不可使用补贴卷</text>
						</view>
						<text>*1</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 补贴卷/健康币 -->
		<view class="pay_subsidies">
			<view>
				<text>补贴卷</text>
				<text>无可用</text>
			</view>
			<view>
				<text>健康币</text>
				<text>共 0 ,可抵 0</text>
			</view>
		</view>
		<!-- 发票 -->
		<view class="pay_fapiao">
			<view>
				<text>发票信息</text>
				<text>></text>
			</view>
			<view class="note">备注选项,可填写与商家达成一致的要求</view>
		</view>
		<!-- 商品金额 -->
		<view class="pay_price">
			<view>
				<text>商品金额</text>
				<text style="font-weight: 700;">${{totalPrice}}</text>
			</view>
			<view>
				<text>补贴</text>
				<text class="active">- $0</text>
			</view>
			<view>
				<text>运费</text>
				<text class="active">$ 0</text>
			</view>
			<view>
				<text>运费补贴</text>
				<text class="active">- $0</text>
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="pay_button">
			<view>
				<text class="pay_bprice">￥{{totalPrice}}</text>
				<text>已享受免邮</text>
			</view>
			<button type="default" @click="buy">点击支付</button>
		</view>
	</view>
</template>


<script>
	import {mapState,mapGetters} from 'vuex'
export default {
	data() {
		return {
			goodsList:[]
		};
	},
	mounted(){


	},
	computed:{
		...mapState({
			cartList: state => state.cart.cartList || []
		}),
			...mapGetters([ 'totalPrice'])
	},
	methods: {
		buy(){
			uni.showToast({
				title:'已支付'
			})
		}
	}

};
</script>

<style lang="scss">
.payContainer {
	height: 100%;
	background-color: #ededed;
	font-size: 28upx;
	padding-bottom: 200upx;
	.addAddress {
		background: white;
		width: 100%;
		height: 115rpx;
		color: #1095fa;
		line-height: 115rpx;
		text-align: center;
		font-size: 28rpx;
		border-bottom: 4rpx dashed blue;
	}
	.paymentAndDistribution {
		width: 100%;
		background: white;
		height: 160rpx;
		margin-top: 10rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		padding: 20rpx;
		.payment {
			display: flex;
			justify-content: space-between;
			text {
				color: #acb7bf;
			}
			i {
				span {
					color: #acb7bf;
				}
			}
		}
		.distribution {
			display: flex;
			justify-content: space-between;
			margin-top: 50rpx;
			i {
				span {
					color: #acb7bf;
				}
			}
		}
	}
	.personMessage {
		width: 100%;
		height: 217rpx;
		background: white;
		margin-top: 20rpx;
		margin-bottom: 30upx;
		padding: 20rpx;
		.top {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding-right: 30rpx;
			.container {
				display: flex;
				.image {
					width: 60rpx;
					height: 60rpx;
					background: #1095fa;
					border-radius: 50%;
					padding: 10rpx;
					text-align: center;
					line-height: 75rpx;
					margin-right: 20rpx;
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
				text {
					line-height: 75rpx;
					color: #1095fa;
					font-weight: 700;
				}
			}
		}
		.bottom {
			margin-top: 30rpx;
			font-size: 28rpx;
			padding-right: 20rpx;
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
				margin-bottom: -10rpx;
			}
		}
	}
	.pay_hospital {
		background-color: #ffffff;
		padding: 30upx 0 30upx 30upx;
		margin-bottom: 30upx;
		.pay_hospital_title {
			margin-bottom: 30upx;
			view {
				font-size: 32upx;
			}
			text {
				font-size: 24upx;
				color: #666;
			}
		}
		.pay_image {
			display: flex;
			justify-content: space-around;
			margin-bottom: 20upx;
			image {
				width: 200upx;
				height: 200upx;
				margin-right: 20upx;
			}
			.pay_image_text {
				flex: 1;
				view {
					line-height: 60upx;
				}
				.pay_image_price {
					padding-right: 30upx;
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
	.pay_subsidies,
	.pay_fapiao,
	.pay_price {
		background-color: #fff;
		line-height: 80upx;
		margin-bottom: 30upx;
		view {
			padding: 0 30upx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1upx solid #ededed;
		}
	}
	// 发票
	.pay_fapiao .note {
		font-size: 24upx;
		color: #666;
	}
	// 价格结算加粗变红
	.pay_price .active {
		font-weight: 700;
		color: #dd1a21;
	}
	// 结算按钮
	.pay_button {
		background-color: #fff;
		position: fixed;
		bottom: 30upx;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100upx;
		view {
			padding-left: 30upx;
			height: 100%;
			line-height: 100%;
			.pay_bprice {
				// height: 100upx;
				line-height: 100upx;
				font-size: 40upx;
				color: #dd524d;
				font-weight: 700;
				padding-right: 10upx;
			}
		}
		button {
			margin: 0;
			height: 100upx;
			line-height: 100upx;
			color: #fff;
			background-color: #dd524d;
			font-size: 40upx;
		}
	}
}
</style>

